<template>
  <app-page>
    <z-paging-swiper>
      <!-- 需要固定在顶部不滚动的view放在slot="top"的view中 -->
      <template #top>
        <app-navbar show-left gradient>
          <template #left>
            <wd-img :src="Logo" height="39rpx" width="242rpx"></wd-img>
          </template>
        </app-navbar>
        <wd-img custom-class="img-top-box img-area" mode="widthFix" :src="topBg"></wd-img>
        <!-- 注意！此处的z-tabs为独立的组件，可替换为第三方的tabs，若需要使用z-tabs，请在插件市场搜索z-tabs并引入，否则会报插件找不到的错误 -->
      </template>
      <!-- 因swiper与swiper-item无法封装在不同组件中，因此这边依然需要设置swiper包裹swiper-item -->
      <view class="menu-area z-999 position-relative pb-16rpx">
        <search-row></search-row>
        <view class="card-swiper">
          <wd-swiper
            v-model:current="bannerCurrent"
            :list="bannerList"
            height="264rpx"
            image-mode="aspectFill"
            custom-indicator-class="custom-indicator-class"
            custom-image-class="custom-image"
            custom-next-image-class="custom-image-prev"
            custom-prev-image-class="custom-image-prev"
            next-margin="16rpx"
            previous-margin="16rpx"
            :interval="5000"
            :autoplay="true"
            :indicator="{ type: 'dots' }"
            @click="handleBanner"></wd-swiper>
        </view>
        <view class="menu-list flex flex-wrap">
          <view v-for="(item, index) in menuList" :key="index" class="menu-item flex flex-wrap justify-center" @click="navTo(item.path)">
            <wd-img :src="item.icon" :height="item.size" :width="item.size"></wd-img>
            <view class="menu-text text-center font-800 font-size-24rpx lh-34rpx mt-16rpx">{{ item.title }}</view>
          </view>
        </view>
      </view>
      <view class="position-sticky z-999 home-tabs flex flex-nowrap items-center pr-16rpx">
        <wd-tabs
          ref="tabsList"
          v-model="tabsCurrent"
          custom-class="tabs-box"
          slidable="always"
          swipeable
          animated
          auto-line-width
          @change="handleTabsChange">
          <block v-for="(item, index) in tabs" :key="index">
            <wd-tab :title="item.title"></wd-tab>
          </block>
        </wd-tabs>
        <wd-button type="text" custom-class="flex flex-nowrap items-center justify-center text-btn">
          更多
          <wd-icon name="arrow-right" size="24rpx" color="#999"></wd-icon>
        </wd-button>
      </view>
      <wd-tabs
        ref="tabsBody"
        v-model="tabsCurrent"
        swipeable+
        animated
        auto-line-width
        custom-class="hide-tab home-list-tab"
        @change="handleTabsChange">
        <block v-for="(item, index) in tabs" :key="index">
          <wd-tab class="" :title="item.title">
            <view class="home-list-body position-relative">
              <z-paging-swiper-item
                ref="swiperItem"
                :tab-index="tabsCurrent"
                :current-index="index"
                @query="queryList"
                @update-list="updateList">
                <view class="">
                <!-- <OrderItem v-for="(it, idx) in dataList[index]" :item="it"></OrderItem> -->
                </view>
              </z-paging-swiper-item>
            </view>
          </wd-tab>
        </block>
      </wd-tabs>
    </z-paging-swiper>
    <app-tabbar-default :border="false" active="/pages/home/index"></app-tabbar-default>
  </app-page>
</template>

<script lang="ts" setup>
import fpIcon from "@/assets/icon/fenpin.png";
import pdIcon from "@/assets/icon/paidui.png";
import pmdIcon from "@/assets/icon/paomadeng.png";
import sbbdIcon from "@/assets/icon/shebeibangding.png";
import ysIcon from "@/assets/icon/yanshi.png";
import yyIcon from "@/assets/icon/yuyue.png";
import Logo from "@/assets/images/logoRow.png";
import topBg from "@/assets/images/topBg.png";
import LoadingManager from "@/utils/loading.ts";

const swiperItem = ref<any>();
const tabsBody = ref();
const tabsList = ref();
const tabs = ref([
  {
    title: "横版",
    type: 0
  },
  {
    title: "竖版",
    type: 1
  }
]);
const menuList: any = ref([
  {
    title: "分屏发布",
    icon: fpIcon,
    size: "80rpx",
    path: "/subpackages/screen/pages/split",
    type: 0
  },
  {
    title: "跑马灯发布",
    icon: pmdIcon,
    size: "80rpx",
    path: "/subpackages/screen/pages/pmd",
    type: 0
  },
  {
    title: "演示发布",
    icon: ysIcon,
    size: "80rpx",
    path: "/subpackages/screen/pages/demo",
    type: 0
  },
  {
    title: "设备绑定",
    icon: sbbdIcon,
    size: "80rpx",
    path: "/subpackages/device/pages/bind",
    type: 0
  },
  {
    title: "预约管理",
    icon: yyIcon,
    size: "80rpx",
    path: "/subpackages/booking/pages/booking",
    type: 0
  },
  {
    title: "排队叫号",
    icon: pdIcon,
    size: "80rpx",
    path: "/subpackages/booking/pages/queuing",
    type: 0
  }
]);
const tabsCurrent = ref(0);
const viewCurrent = ref(0);
const bannerCurrent = ref(0);
// const loadStatus = ref<"loading" | "finished" | "error">("loading");
const pageform = reactive({
  page_no: 1,
  page_size: 10
});
const dataList = ref<any>([]);
function updateList(data: any) {
  // 更新当前对应tab的数据，注意这里请用$set而非this.dataList[this.current]=data，因为需要触发列表渲染
  // // console.log(data);
  if (data && data.data && data.data.lists) {
    dataList.value[tabsCurrent.value] = data.data.lists;
  } else {
    dataList.value[tabsCurrent.value] = data;
  }
}
const bannerList = ref([
  "https://registry.npmmirror.com/wot-design-uni-assets/*/files/redpanda.jpg",
  "https://registry.npmmirror.com/wot-design-uni-assets/*/files/capybara.jpg",
  "https://registry.npmmirror.com/wot-design-uni-assets/*/files/panda.jpg",
  "https://registry.npmmirror.com/wot-design-uni-assets/*/files/moon.jpg",
  "https://registry.npmmirror.com/wot-design-uni-assets/*/files/meng.jpg"
]);
function handleBanner(e: any) {
  console.log(e);
}
function handleTabsChange(value: any) {
  // console.log(value);
  // swiperItem.value[tabsCurrent.value].reload()
  setTimeout(() => {
    viewCurrent.value = value.index;
  }, 300);
}
function queryList(pageNo: any, pageSize: any) {
  // 这里的网络请求请替换成自己的网络请求
  // this.current代表当前下拉刷新/上拉加载更多对应的是第几个
  // LoadingManager.show();
  pageform.page_no = pageNo;
  pageform.page_size = pageSize;
  const index = tabsCurrent.value;
  const params: any = { issue_type: 1, status: tabs.value[index].type, ...pageform };
  // console.log('tabs.value', index);

  if (!params.status) {
    delete params.status;
  }
  if (tabs.value[index].type === 4) {
    params.zhongjiang_status = 1;
    params.status = 3;
  }
  // orderList(params).then(
  //   (res: any) => {
  //     // console.log(res);

  for (let idx = 0; idx < swiperItem.value.length; idx++) {
    const element = swiperItem.value[idx];
    if (element.tabIndex === index) {
      element.complete([]);
    }
  }

  //     // dataList.value[tabsCurrent.value] = res.data.lists
  //     setTimeout(() => {
  //       // console.log(swiperItem.value[index]);

  //     }, 100);
  //     loadStatus.value = "finished";
  //     uni.stopPullDownRefresh();
  //     LoadingManager.hide();
  //   }
  // ).catch((_err: any) => {
  //   // console.log(err);
  //   // console.log(swiperItem.value);

  //   // queryList(pageNo, pageSize )
  //   loadStatus.value = "error";
  //   uni.stopPullDownRefresh();
  //   LoadingManager.hide();
  // });
}
function navTo(path: string) {
  if (path) {
    uni.navigateTo({ url: path })
  }
}
watch(
  () => tabsCurrent.value,
  async (newValue) => {
    tabsList.value.setActive(newValue);
    tabsBody.value.setActive(newValue);
    // console.log(newValue);
  }
);
onPullDownRefresh(() => {
  // swiperItem.value[tabsCurrent.value].reload()
});
uni.navigateTo({ url: "/pages/login/index" }); // 登录页
// uni.navigateTo({ url: "/subpackages/screen/pages/split" }); // 选择分屏
</script>

<style lang="scss" scoped>
.img-top-box {
  z-index: 9;
}
.home-tabs {
  width: 100vw;
  box-sizing: border-box;
}
.menu-list {
  .menu-item {
    width: 33.3%;
    margin-top: 32rpx;
  }
  .menu-text {
    width: 100%;
    color: var(--color-t1)
  }
}
</style>